<!--<!DOCTYPE html>-->
<html lang='en'>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="露">
        <title>立方体</title>
        <style>
            html{
                height: 100%;
            }
            body{ 
                height: 100%;
                margin: 0;
                background: black;
                display: flex;
                justify-content: center;
                align-items: center;
                perspective: 1500px;
            }
            main{
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                animation: 5s dong linear infinite;
            }
            main div{
                width: 100%;
                height: 100%;
                border: 1px solid red;
                background-size: 100%;
                position: absolute;
                opacity: 0.3;
            }
            .yi{
                background-image: url(1.JPG);
                transform: translateZ(150px);
            }
            .er{
                background-image: url(2.JPG);
                transform: translateZ(-150px);
            }
            .san{
                background-image: url(3.JPG);
                transform:translateX(-150px) rotateY(90deg);
            }
            .si{
                background-image: url(4.JPG);
                transform:translateX(150px) rotateY(-90deg);
            }
            .wu{
                background-image: url(5.JPG);
                transform:translateY(150px) rotateX(90deg);
            }
            .liu{
                background-image: url(6.JPG);
                transform: translateY(-150px) rotateX(-90deg);
            }
            @keyframes dong{
                0%{
                    transform: rotateX(0deg) rotateY(0deg);
                }
                100%{
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <main>
            <div class="yi"></div>
            <div class="er"></div>
            <div class="san"></div>
            <div class="si"></div>
            <div class="wu"></div>
            <div class="liu"></div>
        </main>
    </body>
</html>